<template>
	<view class="container">
		<!-- 日期选择区域 -->
		<view class="date-filter">
			<scroll-view scroll-x="true" class="scroll-wrapper">
				<view v-for="(item, index) in dateTypes" :key="index"
					:class="['date-item', activeType === index && 'active']" @click="handleDateTypeChange(index)">
					{{ item.label }}
				</view>
			</scroll-view>
		</view>

		<!-- 自定义日期选择 -->
		<view class="custom-date" v-if="activeType === 4">
			<!-- <view class="selected-date" @click="showrl = true">
				<text>{{ startDate }} 至 {{ endDate }}</text>
				<u-icon name="arrow-down" color="#666" size="28"></u-icon>
			</view> -->

			<!-- uView日历组件 -->
			<u-calendar v-model="showrl" mode="range" :btnstyle="{ background: '#FE9367' }" range-color="#FE9367"
				@change="changeDate" :min-date="minDate" :max-date="maxDate" active-bg-color='#FE9367'></u-calendar>
		</view>

		<!-- 统计信息 -->
		<view class="stats">
			<view class="stat-item">
				<text>合计充值：</text>
				<text class="value">{{ totalRecharge }}</text>
			</view>
			<view class="stat-item">
				<text>合计扣除：</text>
				<text class="value">{{ totalDeduction }}</text>
			</view>
		</view>

		<!-- 数据表格 -->
		<view class="table">
			<view class="table-header">
				<view class="header-item">订单日期</view>
				<view class="header-item">订单数量</view>
				<view class="header-item">订单金额</view>
			</view>
			<view class="table-row" v-for="(item, index) in tableData" :key="index">
				<view class="row-item">{{ item.date }}</view>
				<view class="row-item">{{ item.order }}</view>
				<view class="row-item">￥{{ item.amount }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateTypes: [{
						label: '今天',
						value: 'today'
					},
					{
						label: '全部',
						value: 'all'
					},
					{
						label: '七天',
						value: 7
					},
					{
						label: '本月',
						value: 'month'
					},
					{
						label: '自选',
						value: 'custom'
					}
				],
				activeType: 0,
				startDate: '2025-03-06',
				endDate: '2025-03-13',
				totalRecharge: 0,
				totalDeduction: 0,
				tableData: [{
						date: '2025-03-06',
						order: 'DD20250306001',
						amount: 150
					},
					{
						date: '2025-03-07',
						order: 'DD20250307001',
						amount: 200
					}
				],
				showrl: false,
				minDate: '2010-01-01',
				maxDate: this.formatDate(new Date())
			}
		},
		methods: {
			handleDateTypeChange(index) {
				this.activeType = index
				switch (index) {
					case 0:
						this.setAllTime();
						break
					case 1:
						this.setToday();
						break
					case 2:
						this.setDateRange(7);
						break
					case 3:
						this.setCurrentMonth();
						break
					case 4:
						this.showrl = true;
						break
				}
			},
			setDateRange(days) {
				const end = new Date()
				const start = new Date(end.getTime() - days * 86400000)
				this.startDate = this.formatDate(start)
				this.endDate = this.formatDate(end)
			},
			setCurrentMonth() {
				const date = new Date()
				this.startDate = this.formatDate(new Date(date.getFullYear(), date.getMonth(), 1))
				this.endDate = this.formatDate(new Date(date.getFullYear(), date.getMonth() + 1, 0))
			},
			formatDate(date) {
				return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
			},
			setAllTime() {
				this.startDate = '2000-01-01'
				this.endDate = this.formatDate(new Date())
			},
			setToday() {
				const today = new Date()
				this.startDate = this.formatDate(today)
				this.endDate = this.formatDate(today)
			},
			changeDate(e) {
				[this.startDate, this.endDate] = e
				this.showrl = false
				this.loadData()
			},
			loadData() {
				console.log('加载数据:', this.startDate, this.endDate)
				// 这里添加实际数据请求逻辑
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
	}

	.date-filter {
		padding: 20rpx 0;
	}

	.scroll-wrapper {
		white-space: nowrap;
		width: 100%;
	}

	.date-item {
		display: inline-block;
		margin: 0 10rpx;
		padding: 12rpx 30rpx;
		border-radius: 8rpx;
		border: 1rpx solid #fe93673d;
	}

	.active {
		background-color: #FE9367;
		color: white;
		border-color: #FE9367;
	}

	.selected-date {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		background-color: #fff;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		color: #666;
	}

	.selected-date:active {
		background-color: #f5f5f5;
	}

	.stats {
		display: flex;
		justify-content: space-around;
		margin: 30rpx 0;
		padding: 20rpx;
		background-color: #fe93673d;
		border-radius: 12rpx;
	}

	.value {
		color: #FE9367;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.table {
		border: 1rpx solid #fe93673d;
		border-radius: 12rpx;
	}

	.table-header,
	.table-row {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #fe93673d;
	}

	.header-item {
		flex: 1;
		text-align: center;
		font-weight: bold;
	}

	.row-item {
		flex: 1;
		text-align: center;
	}
</style>